<template>
	<view class="content">
		<!-- 搜索框 -->
		<uni-search-bar v-model="searchValue" :focus="false" placeholder="凑数当评委,开局给歌后打六分?"
			radius="10" >
		</uni-search-bar>
		<!-- 大分类 -->
		<scroll-view id="tab-bar" :scroll-x="true" :show-scrollbar="false" class="scroll-h"
			>
			<view v-for="(tab,index) in tabBars" :id="tab.id" :key="tab.id" :data-current="index" class="uni-tab-item"
				@click="ontabtap">
				<text :class="tabIndex === index ? 'uni-tab-item-title-active' : ''"
					class="uni-tab-item-title">{{tab.name}}</text>
			</view>
		</scroll-view>
		<!-- 排行榜 -->
		<recommend></recommend>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '书城',
				tabBars: [{
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '经典',
					id: 'jingdian'
				}, {
					name: '知识',
					id: 'zhishi'
				}, {
					name: '听书',
					id: 'tingshu'
				}, {
					name: '看剧',
					id: 'kanju'
				}, {
					name: '漫画',
					id: 'manhua'
				},{
					name: '关注',
					id: 'guanzhu'
				}],
				newsList: [],
				tabIndex: 0,
				// 搜索框值
				searchValue:""
			}
		},
		onLoad() {

		},
		methods: {
			// 大分类点击事件 
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
            switchTab(index) {

                if (this.tabIndex === index) {
                    return;
                }

                // // 缓存 tabId
                // if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
                //     let isExist = this.cacheTab.indexOf(this.tabIndex);
                //     if (isExist < 0) {
                //         this.cacheTab.push(this.tabIndex);
                //         //console.log("cache index:: " + this.tabIndex);
                //     }
                // }

                this.tabIndex = index;

                // // 释放 tabId
                // if (this.cacheTab.length > MAX_CACHE_PAGE) {
                //     let cacheIndex = this.cacheTab[0];
                //     this.clearTabData(cacheIndex);
                //     this.cacheTab.splice(0, 1);
                //     //console.log("remove cache index:: " + cacheIndex);
                // }
            },
			scrollInfo(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-h {
	        white-space: nowrap;
	        width: 100%;
	
	        .uni-tab-item {
	            width: 90rpx;
	            height: 40rpx;
	            // background-color: yellowgreen;
	            display: inline-flex;
	            margin-left: 20rpx;
				margin-bottom: 50rpx;
	            // align-items: center;
	            // justify-content: center;
	        }
	    }

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		font-weight: 400;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #010000;
		font-size: 40rpx;
		font-weight: 700;
	}
	
</style>